{{define "theme-daynight/home"}}
<!doctype html>
<html lang="{{.Conf.Language}}">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>{{.Title}}</title>
    <link rel="shortcut icon" type="image/png" href="/static/logo.svg?v20210804" />

    <link rel="stylesheet" href="/static/theme-daynight/css/main.css?v202108042286">
    <link href="https://cdn.staticfile.org/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>

    {{if ts .CustomCode}}
    {{.CustomCode|safe}}
    {{end}}
</head>

<body data-theme="light" data-gridlist="grid">
    <header>
        <section class="nav-bar clearfix">
            <figure class="logo">
                <a href="/">
                    <img src="/static/logo.svg?v20210804" alt='{{tr "NezhaMonitoring"}}' width="50" height="50">
                </a>
                <a href="/">{{.Conf.Site.Brand}}</a>
            </figure>
            <div class="icon-container">
                <div class="row cf">
                    <div class="three col">
                        <div class="hamburger" id="hamburger-icon"><span class="line"></span><span
                                class="line"></span><span class="line"></span></div>
                    </div>
                </div>
            </div>
            <nav class="nav-menu">
                <ul>
                    <li><a href="/">{{tr "Home"}}</a></li>
                    <li><a href="/service">{{tr "Services"}}</a></li>
                    {{if .Admin}}
                    <li><a href="/server">{{tr "AdminPanel"}}</a></li>
                    {{else}}
                    <li><a href="/login">{{tr "Login"}}</a></li>
                    {{end}}
                </ul>
            </nav>
        </section>
    </header>

    <main>
        <div id="app">
            <div class="server-info-container" v-for='server in servers' :id="server.ID">
                <div class="info-body">
                    <ul class="server-info-body-container">
                        <li>
                            <div :class="'state-'+ (server.live?'online':'offline')">
                                <p>@#server.live?'Running':'Down'#@</p>
                            </div>
                        </li>
                        <li>
                            <h3>@#server.Name#@</h3>
                        </li>
                        <li><img :src="'/static/theme-daynight/img/flag/'+(server.Host&&server.Host.CountryCode?server.Host.CountryCode.toUpperCase():'CN')+'.png'"
                                :title="server.Host.CountryCode.toUpperCase()" /></li>
                        <li>@#server.Host.Platform#@</li>
                        <li>@#server.Host.CountryCode.toUpperCase()#@</li>
                        <li>@#formatByteSize(server.State.MemUsed)#@ / @#formatByteSize(server.Host.MemTotal)#@</li>
                        <li>@#server.State?secondToDate(server.State.Uptime):'-'#@</li>
                        <li>@#formatByteSize(server.State.SwapUsed)#@ / @#formatByteSize(server.Host.SwapTotal)#@</li>
                        <li>@#formatByteSize(server.State.DiskUsed)#@ / @#formatByteSize(server.Host.DiskTotal)#@</li>
                        <li>@#formatByteSize(server.State.NetInTransfer)#@
                            (@#formatByteSize(server.State.NetInSpeed)#@/s)</li>
                        <li>@#formatByteSize(server.State.NetOutTransfer)#@
                            (@#formatByteSize(server.State.NetOutSpeed)#@/s)</li>
                        <li>
                            <div class="cpu-bar">
                                <div>
                                    <h4>CPU</h4>
                                </div>
                                <div v-if="server.State" :class="formatPercent(server.live,server.State.CPU, 100).class"
                                    :title="formatPercent(server.live,server.State.CPU,100).percent+'%'">
                                    <div class="progress-bar" role="progressbar"
                                        :aria-valuenow="formatPercent(server.live,server.State.CPU,100).percent"
                                        aria-valuemin="0" aria-valuemax="100"
                                        :style="formatPercent(server.live,server.State.CPU, 100).style">
                                        <p>@#formatPercent(server.live,server.State.CPU,100).percent#@%</p>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="ram-bar">
                                <div>
                                    <h4>RAM</h4>
                                </div>
                                <div v-if="server.State"
                                    :class="formatPercent(server.live,server.State.MemUsed, server.Host.MemTotal).class"
                                    :title="parseInt(server.State?server.State.MemUsed/server.Host.MemTotal*100:0)+'%'">
                                    <div class="progress-bar" role="progressbar"
                                        :aria-valuenow="parseInt(server.State?server.State.MemUsed/server.Host.MemTotal*100:0)"
                                        aria-valuemin="0" aria-valuemax="100"
                                        :style="formatPercent(server.live,server.State.MemUsed, server.Host.MemTotal).style">
                                        <p>@#parseInt(server.State?server.State.MemUsed/server.Host.MemTotal*100:0)#@%
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="disk-bar">
                                <div>
                                    <h4>{{tr "DiskUsed"}}</h4>
                                </div>
                                <div v-if="server.State"
                                    :class="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).class"
                                    :title="parseInt(server.State?server.State.DiskUsed/server.Host.DiskTotal*100:0)+'%'">
                                    <div class="progress-bar" role="progressbar"
                                        :aria-valuenow="parseInt(server.State?server.State.DiskUsed/server.Host.DiskTotal*100:0)"
                                        aria-valuemin="0" aria-valuemax="100"
                                        :style="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).style">
                                        <p>@#parseInt(server.State?server.State.DiskUsed/server.Host.DiskTotal*100:0)#@%
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="sidebar-container">
            <ul>
                <li><i class="fas fa-sun" title='{{tr "LightMode"}}'></i><span>{{tr "LightMode"}}</span></li>
                <li><i class="fas fa-moon" title='{{tr "DarkMode"}}'></i><span>{{tr "DarkMode"}}</span></li>
                <li><i class="fas fa-th" title='{{tr "GridLayout"}}'></i><span>{{tr "GridLayout"}}</span></li>
                <li><i class="fas fa-list-ul" title='{{tr "ListLayout"}}'></i><span>{{tr "ListLayout"}}</span></li>
            </ul>
        </div>
    </main>

    <section class="dark-light-toggle">
        <label class="switcher">
            <input type="checkbox" name="theme" id="dark-light" />
            <div>
                <i class="fas fa-adjust"></i>
            </div>
        </label>
    </section>

    <!-- Back to top button -->
    <a id="back-to-top"></a>

    <footer>
        <div class="footer-container">
            <div><a href="https://github.com/naiba/nezha" target="_blank">Powered by {{tr "NezhaMonitoring"}} · {{.Version}}</a>
                <p>&copy; <span id="copyright-date">
                        <script>document.getElementById('copyright-date').appendChild(document.createTextNode(new Date().getFullYear()))</script>
                    </span> · <a href="https://blog.jackiesung.com" target="_blank">Theme designed by Jackie Sung</a>
                </p>
            </div>
        </div>
    </footer>

    <script src="/static/theme-daynight/js/main.js?v202102012266"></script>
    <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/limonte-sweetalert2/11.4.4/sweetalert2.all.min.js"></script>

    <script>
        const initData = JSON.parse('{{.Servers}}').servers;
        var statusCards = new Vue({
            el: '#app',
            delimiters: ['@#', '#@'],
            data: {
                servers: initData,
                cache: [],
            },
            mounted() {
                this.DarkMode();
            },
            methods: {
                mergeUsage(state, host) {
                    if (!state) {
                        return 0
                    }
                    if (!host) {
                        return state.CPU
                    }
                    return (state.CPU + (state.MemUsed / host.MemTotal * 100) + (state.DiskUsed / host.DiskTotal * 100)) / 3
                },
                formatPercent(live, used, total) {
                    const percent = live ? (parseInt(used / total * 100) || 0) : -1
                    if (!this.cache[percent]) {
                        this.cache[percent] = {
                            class: {
                                ui: true,
                                progress: true,
                            },
                            style: {
                                'transition-duration': '300ms',
                                'min-width': 'unset',
                                width: percent + '% !important',
                            },
                            percent,
                        }
                        if (percent < 0) {
                            this.cache[percent].style['background-color'] = 'slategray'
                            this.cache[percent].class.offline = true
                        } else if (percent < 51) {
                            this.cache[percent].style['background-color'] = '#53B449'
                            this.cache[percent].class.fine = true
                        } else if (percent < 81) {
                            this.cache[percent].style['background-color'] = '#FBB142'
                            this.cache[percent].class.warning = true
                        } else {
                            this.cache[percent].style['background-color'] = '#F23D34'
                            this.cache[percent].class.error = true
                        }
                    }
                    return this.cache[percent]
                },
                readableBytes(bytes) {
                    if (!bytes) {
                        return '0B'
                    }
                    var i = Math.floor(Math.log(bytes) / Math.log(1024)),
                        sizes = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
                    return parseFloat((bytes / Math.pow(1024, i)).toFixed(2)) + sizes[i];
                },
                DarkMode() {
                    const hour = new Date(Date.now()).getHours()
                    if (hour > 17 || hour < 4) {
                        document.querySelector("input[name=theme]").checked = true;
                        document.getElementsByTagName("BODY")[0].setAttribute('data-theme', 'dark');
                    }
                },
                secondToDate(s) {
                    var d = Math.floor(s / 3600 / 24);
                    if (d > 0) {
                        return d + " {{tr "Day"}}"
                    }
                    var h = Math.floor(s / 3600 % 24);
                    var m = Math.floor(s / 60 % 60);
                    var s = Math.floor(s % 60);
                    return h + ":" + ("0" + m).slice(-2) + ":" + ("0" + s).slice(-2);
                },
                formatTimestamp(t) {
                    return new Date(t * 1000).toLocaleString()
                },
                formatByteSize(bs) {
                    const x = this.readableBytes(bs)
                    return x != "NaN undefined" ? x : '0B'
                }
            }
        })
        const wsProtocol = window.location.protocol == "https:" ? "wss" : "ws"
        let canShowError = true;
        function connect() {
            const ws = new WebSocket(wsProtocol + '://' + window.location.host + '/ws');
            ws.onopen = function (evt) {
                canShowError = true;
                Swal.fire({
                    position: 'top',
                    icon: 'success',
                    title: '{{tr "RealtimeChannelEstablished"}}',
                    text: '{{tr "GetTheLatestMonitoringDataInRealTime"}}',
                    showConfirmButton: false,
                    timer: 2000
                });
            }
            ws.onmessage = function (evt) {
                const data = JSON.parse(evt.data)
                statusCards.servers = data.servers
                const keys = Object.keys(statusCards.servers)
                for (let i = 0; i < keys.length; i++) {
                    const ns = statusCards.servers[keys[i]];
                    if (!ns.Host) ns.live = false
                    else {
                        const lastActive = new Date(ns.LastActive).getTime()
                        if (data.now - lastActive > 10 * 1000) {
                            ns.live = false
                        } else {
                            ns.live = true
                        }
                    }
                }
            }
            ws.onclose = function () {
                if (canShowError) {
                    canShowError = false;
                    Swal.fire({
                        position: 'top',
                        icon: 'error',
                        title: '{{tr "RealtimeChannelDisconnect"}}',
                        text: '{{tr "CanNotGetTheLatestMonitoringDataInRealTime"}}',
                        showConfirmButton: false,
                        timer: 2000
                    });
                }
                setTimeout(function () {
                    connect()
                }, 3000);
            }
            ws.onerror = function () {
                ws.close()
            }
        }
        connect();
    </script>
</body>

</html>
{{end}}